extends ../_layout/default.pug

block scripts
  if !starter
    // Plugins and scripts required by this view
    script(src='node_modules/@coreui/utils/dist/umd/index.js')
    script(src='js/colors.js')

block breadcrumb
    +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Theme'},
      { label: 'Colors'},
    ]
  )

block view
  .card.mb-4
    .card-header
      |  Theme colors
    .card-body
      .row
        .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
          .bg-primary.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
          h6 Brand Primary Color
        .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
          .bg-secondary.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
          h6 Brand Secondary Color
        .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
          .bg-success.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
          h6 Brand Success Color
        .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
          .bg-danger.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
          h6 Brand Danger Color
        .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
          .bg-warning.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
          h6 Brand Warning Color
        .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
          .bg-info.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
          h6 Brand Info Color
        .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
          .bg-light.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
          h6 Brand Light Color
        .col-xl-2.col-md-3.col-sm-4.col-6.mb-4
          .bg-dark.theme-color.w-75.rounded.mb-2(style='padding-top:75%')
          h6 Brand Dark Color
